<template>
	<el-config-provider :button="config" :size="assemblySize" :locale="locale">
		<router-view> </router-view>
	</el-config-provider>
</template>
<script setup lang="ts">
import { computed, reactive } from "vue";
import { GlobalStore } from "./stores";
import { useTheme } from "@/hooks/useTheme";

import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { getBrowserLang } from "./utils";

// 使用主题
useTheme();

const globalStore = GlobalStore();
// 配置element按钮文字中间是否有空格
const config = reactive({
	autoInsertSpace: false
});

// element language
const locale = computed(() => {
	if (globalStore.language == "zh") return zhCn;
	if (globalStore.language == "en") return en;
	return getBrowserLang() == "zh" ? zhCn : en;
});

// 配置全局组件大小（small/default/large）
const assemblySize = computed((): string => globalStore.assemblySize);
</script>
